/// <reference path="modernizr-2.0.6.min.js" />

(function ($) {
	window.html5today = {

		init: function () {
			/// <summary>
			/// Initializes the app on startup. This method is intended to be run immediately. Call 
			/// <see cref="html5today.load"/> when the <see cref="document.onready"/> event is triggered.
			/// </summary>

			// init feature detection
			html5today.features.init();

			// standard features
			yepnope({ test:(html5today.features.sitePinned), yep:'scripts/features/pin-site.js' });
			yepnope({ test:(html5today.features.performanceNavigation), yep:'scripts/features/perfint-nav.js' });

			// test
			yepnope({ test:(document.location.search == '?test'), yep:'scripts/tests.js' });
		},


		load: function () {
			/// <summary>
			/// Loads the app after everything has been initialized. This method is intended to be called when the 
			/// <see cref="document.onready"/> event is triggered.
			/// </summary>

			// TODO: Disabling presentation mode; see play/index.htm
			/*
			var c = html5today.controllers,
				$s = html5today.$slides = $('#container>header,article>header,article>section,#container>footer');
			// $s.append('<nav><a rel="prev">&lt;</a><a rel="next" href="#slide-h5sem">&gt;</a></nav>');

			// TODO: Handle the scenario where somebody goes to an anchor on the first call
			location.href = '#container';

			$(document.body).keyup(function (e, p, $t, t) {
				// < = -1, > = 1; otherwise, 0
				e = e.which || e.keyCode;
				e = (e == 37 ? -1 : (e == 39 ? 1 : 0));

				// run current controller based on direction
				if (e == -1 && html5today.controller != 0) {
					if (c[html5today.controller].prev() === false) { return; }
					html5today.controller--;
					html5today.controllerStep = 0;
				} else if (e == 1 && html5today.controller < c.length) {
					if (c[html5today.controller].next() === false) { return; }
					$(location.hash).children('.slide').not(':first').hide();
					html5today.controller++;
					html5today.controllerStep = 0;
				}
			});
			*/
		},

		controller: 0,
		controllerStep: 0,
		controllers: [
			{
				// #container>header
				prev: function () { },
				next: function () { location.href = '#html5-top'; }
			},
			{
				// #html5
				prev: function () { location.href = '#top'; },
				next: function () { location.href = '#html5-history'; }
			},
			{
				// #html5-history
				prev: function () { location.href = '#html5-top'; },
				next: function () { location.href = '#html5-pubs'; }
			},
			{
				// #html5-pubs
				prev: function () { location.href = '#html5-history'; },
				next: function () { location.href = '#html5-process'; }
			},
			{
				// #html5-process
				prev: function () { location.href = '#html5-pubs'; },
				next: function () {
					if (html5today.controllerStep == 0) {
						html5today.controllerStep = 1;
						$('#html5-ishere').show();
						return false;
					}
					$('#html5-ishere').hide();
					location.href = '#html5-inprogress';
				}
			},
			{
				// #html5-inprogress
				// TODO: Handle case where user is on second step and goes back; when they go forward, the state will not have been reset
				prev: function () { location.href = '#html5-process'; },
				next: function () {
					if (html5today.controllerStep == 0) {
						html5today.controllerStep = 1;
						$('#html5-inprogress-pubswithout').hide();
						$('#html5-inprogress-pubswith').removeClass('no-js').show();
						return false;
					}
					$('#html5-inprogress-pubswith').hide();
					$('#html5-inprogress-pubswithout').show();
					location.href = '#html5-footer';
				}
			},
			{
				// #html5-footer
				prev: function () { location.href = '#html5-inprogress'; },
				next: function () {
					if (html5today.controllerStep == 0) {
						html5today.controllerStep = 1;
						$('#html5-footer-cantuse').removeClass('no-js').show();
						return false;
					}
					$('#html5-footer-cantuse').hide();
					location.href = '#detect-top';
				}
			},
			{
				// #detect
				prev: function () { location.href = '#html5-footer'; },
				next: function () { location.href = '#detect-js'; }
			},
			{
				// #detect-js
				prev: function () { location.href = '#detect-top'; },
				next: function ($l, $td, $t, $d) {
					$t = ($td = ($l = $('#detect-js>dl')).children().hide()).filter('dt');
					$d = $l.children('dd');
					$l.removeClass('no-js');
					if (html5today.controllerStep < $t.length) {
						$('#detect-js>.slide:first').hide();
						if (html5today.controllerStep > 0) {
							$($t[html5today.controllerStep - 1]).add($d[html5today.controllerStep - 1]).hide();
						}
						$($t[html5today.controllerStep]).add($d[html5today.controllerStep]).show();
						html5today.controllerStep++;
						return false;
					}
					$td.hide();
					$('#detect-js>.slide:first').show();
					location.href = '#detect-modjs';
				}
			},
			{
				// #detect-modjs
				prev: function () { location.href = '#detect-js'; },
				next: function ($s) {
					$s = $('#detect-modjs>.slide');
					$s.filter(':last').add($s.find('.after'))
						.removeClass('no-js').hide();
					switch (html5today.controllerStep) {
						case 0:
							$s.filter(':first').children('.before').hide();
							$s.filter(':first').children('.after').show();
							break;
						case 1:
							$s.filter(':first').children('.after').hide();
							$s.filter(':last').add($s.filter(':last').children('.before')).show();
							break;
						case 2:
							$s.filter(':last').children('.before').hide();
							$s.filter(':last').add($s.filter(':last').children('.after')).show();
							break;
						case 3:
							$s.filter(':last').children('.after').hide();
							$s.filter(':first').add($s.filter(':first').children('.before')).show();
							location.href = '#detect-modload';
							return true;
					}
					html5today.controllerStep++;
					return false;
				}
			},
			{
				// #detect-modload
				prev: function () { location.href = '#detect-modjs'; },
				next: function () {
					if (html5today.controllerStep == 0) {
						html5today.controllerStep = 1;
						$('#detect-modload>.slide:first').hide();
						$('#detect-modload>.slide:last').show();
						return false;
					}
					$('#detect-modload>.slide:last').hide();
					$('#detect-modload>.slide:first').show();
					location.href = '#detect-fallback';
				}
			},
			{
				// #detect-fallback
				prev: function () { location.href = '#detect-modload'; },
				next: function () { location.href = '#detect-footer'; }
			},
			{
				// #detect-footer
				prev: function () { location.href = '#detect-fallback'; },
				next: function () { location.href = '#semantics-top'; }
			},
			{
				// #semantics
				prev: function () { location.href = '#detect-footer'; },
				next: function () { location.href = '#semantics-new'; }
			},
			{
				// #semantics-new
				prev: function () { location.href = '#semantics-top'; },
				next: function () { location.href = '#semantics-meta'; }
			},
			{
				// #semantics-meta
				prev: function () { location.href = '#semantics-new'; },
				next: function ($s) {
					/*
					$s = $('#detect-meta>.slide').hide();
					$s.filter(':first').show();
					switch (html5today.controllerStep) {
						case 0:
							$s.filter(':first').hide();
							$s.filter(':eq(1)').show().children('.before').show();
							$s.filter(':eq(1)').children('.after,.slide').hide();
							break;
						case 1:
							$s.filter(':eq(1)').children('.before').hide();
							$s.filter(':eq(1)').children('.after').show();
							break;
						case 2:
							$s.filter(':eq(1)').children('.after').hide();
							$s.filter(':eq(1)').children('.slide').show();
							break;
						case 2:
							$s.filter(':eq(1)').hide();
							$s.filter(':eq(2)').show();
							break;
						case 3:
							$s.filter(':eq(2)').hide();
							$s.filter(':first').show();
							*/
							location.href = '#semantics-section';
							return true;
					/*}
					html5today.controllerStep++;
					return false;
					*/
				}
			},
			{
				// #semantics-section
				prev: function () { location.href = '#semantics-meta'; },
				next: function () { location.href = '#semantics-group'; }
			},
			{
				// #semantics-group
				prev: function () { location.href = '#semantics-section'; },
				next: function () { location.href = '#semantics-text'; }
			},
			{
				// #semantics-text
				prev: function () { location.href = '#semantics-group'; },
				next: function () { location.href = '#semantics-embed'; }
			},
			{
				// #semantics-embed
				prev: function () { location.href = '#semantics-text'; },
				next: function () { location.href = '#semantics-table'; }
			},
			{
				// #semantics-table
				prev: function () { location.href = '#semantics-embed'; },
				next: function () { location.href = '#semantics-forms'; }
			},
			{
				// #semantics-forms
				prev: function () { location.href = '#semantics-table'; },
				next: function () { location.href = '#semantics-interact'; }
			},
			{
				// #semantics-interact
				prev: function () { location.href = '#semantics-forms'; },
				next: function () { location.href = '#semantics-link'; }
			},
			{
				// #semantics-link
				prev: function () { location.href = '#semantics-interact'; },
				next: function () { location.href = '#semantics-extend'; }
			},
			{
				// #semantics-extend
				prev: function () { location.href = '#semantics-link'; },
				next: function () { location.href = '#semantics-footer'; }
			},
			{
				// #semantics-footer
				prev: function () { location.href = '#semantics-extend'; },
				next: function () { location.href = '#offstore-top'; }
			},
			{
				// #offstore
				prev: function () { location.href = '#semantics-footer'; },
				next: function () { location.href = '#offstore-appcache'; }
			},
			{
				// #offstore-appcache
				prev: function () { location.href = '#offstore-top'; },
				next: function () { location.href = '#offstore-storage'; }
			},
			{
				// #offstore-storage
				prev: function () { location.href = '#offstore-appcache'; },
				next: function () { location.href = '#offstore-file'; }
			},
			{
				// #offstore-file
				prev: function () { location.href = '#offstore-storage'; },
				next: function () { location.href = '#offstore-db'; }
			},
			{
				// #offstore-db
				prev: function () { location.href = '#offstore-file'; },
				next: function () { location.href = '#offstore-events'; }
			},
			{
				// #offstore-events
				prev: function () { location.href = '#offstore-db'; },
				next: function () { location.href = '#device-top'; }
			},
			{
				// #device
				prev: function () { location.href = '#offstore-events'; },
				next: function () { location.href = '#device-geo'; }
			},
			{
				// #device-geo
				prev: function () { location.href = '#device-top'; },
				next: function () { location.href = '#device-capture'; }
			},
			{
				// #device-capture
				prev: function () { location.href = '#device-geo'; },
				next: function () { location.href = '#connect-top'; }
			},
			{
				// #connect
				prev: function () { location.href = '#device-capture'; },
				next: function () { location.href = '#connect-sockets'; }
			},
			{
				// #connect-sockets
				prev: function () { location.href = '#connect-top'; },
				next: function () { location.href = '#connect-events'; }
			},
			{
				// #connect-events
				prev: function () { location.href = '#connect-sockets'; },
				next: function () { location.href = '#media-top'; }
			},
			{
				// #media
				prev: function () { location.href = '#connect-events'; },
				next: function () { location.href = '#media-audio'; }
			},
			{
				// #media-audio
				prev: function () { location.href = '#media-top'; },
				next: function () { location.href = '#media-video'; }
			},
			{
				// #media-video
				prev: function () { location.href = '#media-audio'; },
				next: function () { location.href = '#graphics-top'; }
			},
			{
				// #graphics
				prev: function () { location.href = '#media-video'; },
				next: function () { location.href = '#graphics-svg'; }
			},
			{
				// #graphics-svg
				prev: function () { location.href = '#graphics-top'; },
				next: function () { location.href = '#graphics-canvas'; }
			},
			{
				// #graphics-canvas
				prev: function () { location.href = '#graphics-svg'; },
				next: function () { location.href = '#graphics-webgl'; }
			},
			{
				// #graphics-webgl
				prev: function () { location.href = '#graphics-canvas'; },
				next: function () { location.href = '#perfint-top'; }
			},
			{
				// #perfint
				prev: function () { location.href = '#graphics-webgl'; },
				next: function () { location.href = '#perfint-workers'; }
			},
			{
				// #perfint-workers
				prev: function () { location.href = '#perfint-top'; },
				next: function () { location.href = '#perfint-xhr'; }
			},
			{
				// #perfint-xhr
				prev: function () { location.href = '#perfint-workers'; },
				next: function () { location.href = '#perfint-time'; }
			},
			{
				// #perfint-time
				prev: function () { location.href = '#perfint-xhr'; },
				next: function () { location.href = '#perfint-nav'; }
			},
			{
				// #perfint-nav
				prev: function () { location.href = '#perfint-time'; },
				next: function () { location.href = '#perfint-vis'; }
			},
			{
				// #perfint-vis
				prev: function () { location.href = '#perfint-nav'; },
				next: function () { location.href = '#perfint-immed'; }
			},
			{
				// #perfint-immed
				prev: function () { location.href = '#perfint-vis'; },
				next: function () { location.href = '#perfint-anim'; }
			},
			{
				// #perfint-anim
				prev: function () { location.href = '#perfint-immed'; },
				next: function () { location.href = '#styling-top'; }
			},
			{
				// #styling
				prev: function () { location.href = '#perfint-anim'; },
				next: function () { location.href = '#styling-all'; }
			},
			{
				// #styling-all
				prev: function () { location.href = '#styling-top'; },
				next: function () { location.href = '#tools-top'; }
			},
			{
				// #tools-top
				prev: function () { location.href = '#styling-all'; },
				next: function () { location.href = '#resources-top'; }
			},
			{
				// #resources
				prev: function () { location.href = '#tools-top'; },
				next: function () { location.href = '#resources-main'; }
			},
			{
				// #resources-main
				prev: function () { location.href = '#resources-top'; },
				next: function () { location.href = '#tools-top'; }
			},
			{
				// #tools-top
				prev: function () { location.href = '#resources-main'; },
				next: function () { location.href = '#tools-main'; }
			},
			{
				// #tools-main
				prev: function () { location.href = '#tools-top'; },
				next: function () { location.href = '#footer'; }
			},
			{
				// #footer
				prev: function () { location.href = '#tools-main'; },
				next: function () {
					location.href = '#top';
					html5today.controller = 0;
					return false;
				}
			}
		],

		features: {
			init: function (hc) {
				/// <summary>
				/// Performs feature detection checks not currently supported by Modernizr.
				/// </summary>
				/// <param name="hc">Placeholder for a collection of CSS classes to add to the html element.</param>

				hc = [];

				// input types; see: #detect-js
				hc.push((Modernizr.inputtypes.email ? '' : 'no-') + 'emailinput');

				// video formats; see: #detect-js
				switch (Modernizr.video.h264) {
					case 'probably': hc.push('h264-probably'); break;
					case 'maybe': hc.push('h264-maybe'); break;
					default: hc.push('no-h264'); break;
				}

				// window.performance.timing
				html5today.features.performance = window.performance;
				html5today.features.performanceNavigation = window.performance && window.performance.navigation;
				html5today.features.performanceTiming = window.performance && window.performance.timing;

				// sitePinning/sitePinned
				try {
					html5today.features.sitePinned = window.external.msIsSiteMode();
					html5today.features.sitePinning = true;
				} catch (e) {
					/**
					* Source: window.external.msIsSiteMode()
					* Reason: browser doesn't support pinning
					* Action: set flag
					*/
					html5today.features.sitePinning = false;
				}

				// update <html class>
				$('html:first').addClass(hc.join(' '));
			}
		}

	};
})(jQuery);


// initialize now
html5today.init();

// load after page is ready
$(html5today.load);